<template>
	<view class="detail">
		<view class="students">
			<view class="top">
				学生信息
			</view>
			<view class="students_info">
				<view class="pd">
					<view class="image" style="margin-right: 40rpx;">
						<img style="width: 100rpx; height: 100rpx;" src="https://img1.baidu.com/it/u=3705338840,1948581898&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
					</view>
					<view style="display: flex; flex-direction: column; justify-content: space-between;">
						<view>
							{{detailobj.name}}<image v-if="detailobj.sex == 1" style="width: 20rpx; height: 20rpx; margin-left: 20rpx;" src="../../static/male.png" mode=""></image><image v-if="detailobj.sex == 0" style="width: 20rpx; height: 20rpx; margin-left: 20rpx;" src="../../static/female.png" mode=""></image>
						</view>
						<view>
							{{detailobj.studentID}}
						</view>
					</view>
				</view>
				<view class="pd">
					学院：<text style="color: #797979;">{{detailobj.college}}</text>
				</view>
				<view class="pd">
					专业：<text style="color: #797979;">{{detailobj.speciality}}</text>
				</view>
				<view class="pd">
					年级：<text style="color: #797979;">{{detailobj.grade}}</text>
				</view>
				<view class="pd">
					本人联系电话：<text style="color: #006DFF;" @click="makeCall">{{detailobj.phone}}</text>
				</view>
				<view class="pd">
					导师姓名：<text style="color: #797979;">{{detailobj.mentor}}</text>
				</view>
				<view class="pd">
					辅导员姓名：<text style="color: #797979;">{{detailobj.counsellor}}</text>
				</view>
				<view class="pd">
					入住信息：<text style="color: #797979;">{{detailobj.checkIn}}</text>
				</view>
			</view>
		</view>
		<view class="registrationInfo">
			<view class="top">
				留校登记信息
			</view>
			<view v-if="inOut == 0" style="padding: 40rpx 0rpx;">
				<view style="width: 100rpx; height: 100rpx; margin: auto;">
					<img style="width: 100%; height: 100%;" src="../../static/nodata.png" alt="" />
				</view>
				<view style="text-align: center;">
					未登记，无法查看
				</view>
			</view>
			<view v-if="inOut == 1" style="padding: 20rpx 0rpx;">
				<view class="pd">
					留校原因：<text style="color: #797979;">{{detailobj.reason}}</text>
				</view>
				<view class="pd">
					计划留校开始时间：<text style="color: #797979;">{{detailobj.startTime}}</text>
				</view>
				<view class="pd">
					计划留校结束时间：<text style="color: #797979;">{{detailobj.endTime}}</text>
				</view>
				<view class="pd">
					家庭联系人姓名：<text style="color: #797979;">{{detailobj.emergentName}}</text>
				</view>
				<view class="pd">
					家庭联系人电话：<text style="color: #797979;">{{detailobj.emergentPhone}}</text>
				</view>
				<view class="pd">
					是否需要校内住宿：<text style="color: #797979;">{{detailobj.room}}</text>
				</view>
			</view>
		</view>
		<view class="approvalInfo">
			<view class="approval">
				<view class="left">
					审批流程
				</view>
				<view v-if="!flag" class="right" @click="handleFlag">
					<text>展开</text><uni-icons type="down" size="16" color="#006DFF"></uni-icons>
				</view>
				<view v-else class="right" @click="handleFlag">
					<text>收起</text><uni-icons type="up" size="16" color="#006DFF"></uni-icons>
				</view>
			</view>
			<view v-if="flag && inOut == 0" style="padding: 40rpx 0rpx;">
				<view style="width: 100rpx; height: 100rpx; margin: auto;">
					<img style="width: 100%; height: 100%;" src="../../static/nodata.png" alt="" />
				</view>
				<view style="text-align: center;">
					未登记，无法查看
				</view>
			</view>
			<view class="bottom" v-if="flag && inOut == 1">
				<view class="steps" v-for="(item, index) in this.detailobj.list" :key="index">
					<view class="step">
						<view class="yuan"></view>
						<view :class="item.active ? 'line' : 'line1'"></view>
					</view>
					<view class="content">
						<view class="left" :style="`background: ${item.back}; color: ${item.color}`">
							{{item.surname}}
						</view>
						<view class="right">
							<view class="title">
								{{item.title}}
							</view>
							<view class="right_bottom">
								<view class="name">
									{{item.name}}
								</view>
								<view class="flowPath" :style="item.status == 1 ? 'color: #797979' : item.status == 2 ? 'color: #006DFF' : 'color: #FF5300'">
									{{item.flowPath}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="record" v-if="stay == null">
			<view class="top">
				签到记录
			</view>
			<view v-if="inOut == 0" style="padding: 20rpx 0rpx;">
				<view style="width: 100rpx; height: 100rpx; margin: auto;">
					<img style="width: 100%; height: 100%;" src="../../static/nodata.png" alt="" />
				</view>
				<view style="text-align: center;">
					未登记，无法查看
				</view>
			</view>
			<view v-if="inOut == 1" style="padding: 20rpx 0rpx;">
				<view class="pd">
					签到时间：<text style="color: #797979;">{{detailobj.signInTime}}</text>
				</view>
				<view class="pd">
					签到地点：<text style="color: #797979;">{{detailobj.signInAddress}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: true,
				inOut: 0,
				stay: '',
				detailobj: {
					name: '黎簇',
					studentID: '123123',
					college: '格斗探险学院',
					speciality: '格斗探险',
					grade: '2023',
					phone: '13270453198',
					mentor: '吴邪',
					counsellor: '黑瞎子',
					checkIn: '清河园区2号楼1209房间',
					sex: '1',
					reason: '不想回家',
					startTime: '2023-11-16 00:00:00',
					endTime: '2023-11-16 23:59:59',
					emergentName: '王军',
					emergentPhone: '13270343198',
					room: '不需要',
					signInTime: '2024/01/03 00:00:00',
					signInAddress: 'A地点',
					list: [{
						title: '发起人(学生)',
						surname: '张',
						flowPath: '已发起',
						name: '张婉悠',
						active: 0,
						back: '#FFD4D4',
						color: '#FE7575',
						status: '1'
					},{
						title: '审批人(导师)',
						surname: '童',
						flowPath: '审批中',
						name: '童锦程',
						active: 1,
						back: '#E2E6FF',
						color: '#6A7CE3',
						status: '2'
					},{
						title: '审批人(辅导员)',
						surname: '张',
						flowPath: '待审批',
						name: '张起灵',
						active: 0,
						back: '#FFEAC2',
						color: '#F8852C',
						status: '3'
					},{
						title: '发起人(学生)',
						surname: '鹿',
						flowPath: '待审批',
						name: '鹿晗',
						active: 0,
						back: '#E2E6FF',
						color: '#6A7CE3',
						status: '3'
					}],
				}
			}
		},
		onLoad(options) {
			this.inOut = options.inOut
			this.stay = options.stay || null
		},
		methods: {
			handleFlag() {
				this.flag = !this.flag
			},
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '13270453198' // 这里替换为你要拨打的电话号码
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		width: 94%;
		margin: 20rpx auto;
		.students{
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx 0rpx;
			.top{
				font-size: 28rpx;
				border-left: 10rpx solid #166AFF;
				padding-left: 12rpx;
			}
			.students_info{
				color: #262626;
			}
		}
		.registrationInfo{
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx 0rpx;
			.top{
				font-size: 28rpx;
				border-left: 10rpx solid #166AFF;
				padding-left: 12rpx;
			}
		}
		.approvalInfo{
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx 0rpx;
			.approval{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					font-size: 28rpx;
					border-left: 10rpx solid #166AFF;
					padding-left: 12rpx;
				}
				.right{
					font-size: 24rpx;
					color: #006DFF;
				}
			}
			.bottom{
				margin: 20rpx 0rpx;
				.steps{
					list-style: none;
					box-sizing: border-box;
					padding-left: 20rpx;
					display: flex;
					.step{
						position: relative;
						.line::before {
							z-index: 1;
							content: "";
							background-color: #0091ff;
							width: 20rpx;
							height: 20rpx;
							color: #fff;
							position: absolute;
							border-radius: 50%;
							left: 0;
							top: 20rpx;
							transform: translate(-50%, -50%);
						}
						
						.line {
							font-size: 16px;
							line-height: 22.5px;
							font-weight: 500;
							color: #20a0ff;
						}
						.line1::before {
							z-index: 1;
							content: "";
							background-color: #ccc;
							width: 20rpx;
							height: 20rpx;
							color: #fff;
							position: absolute;
							border-radius: 50%;
							left: 0;
							top: 20rpx;
							transform: translate(-50%, -50%);
						}
						.line1 {
							font-size: 16px;
							line-height: 22.5px;
							font-weight: 500;
							color: #20a0ff;
						}
						.yuan {
							width: 2px;
							height: 100%;
							background-color: #D9D9D9;
							position: absolute;
							top: 20rpx;
							bottom: 0;
							left: -1px;
						}
					}
				}
				.steps:last-child .step .yuan  {
					display: none;
				}
				.content{
					width: 94%;
					height: 100%;
					background: #FFFFFF;
					box-shadow: 0 1px 6px 2px #7c829224;
					border-radius: 8px;
					padding: 20rpx;
					display: flex;
					align-items: center;
					margin: 20rpx 0rpx 20rpx 40rpx;
					.left{
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 50%;
						margin-right: 32rpx;
					}
					.right{
						.title{
							margin: 6rpx 0rpx;
						}
						.right_bottom{
							margin: 6rpx 0rpx;
							display: flex;
							.name{
								width: 150rpx;
							}
							.flowPath{
							}
						}
					}
				}
			}
		}
		.record{
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx 0rpx;
			.top{
				font-size: 28rpx;
				border-left: 10rpx solid #166AFF;
				padding-left: 12rpx;
			}
		}
		.pd{
			margin: 20rpx 0rpx;
			display: flex;
		}
	}
</style>